import { Component, OnInit } from '@angular/core';
import {HttpClient,HttpHeaders} from "@angular/common/http";
import {TranslateService} from '@ngx-translate/core';
import { DefaultLanguageService } from '@services/default-language.service';
import { Platform,NavController  } from '@ionic/angular';
import { AuthTokenService } from '@services/auth-token.service';
import {CustomToastProviderService} from '@common-components/common-toast/custom-toast-provider.service';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-selected-amount',
  templateUrl: './selected-amount.page.html',
  styleUrls: ['./selected-amount.page.scss'],
})
export class SelectedAmountPage implements OnInit {

  // inner: boolean = true;

  selectedBtn: boolean = false;

  toggleDisabled:boolean;// = true;
  amtButtons = [
    {
      id: '1',
      selected: false,
      size: 3,
      amt: '50',
      color: 'light',
      disabled:false
    },
    {
      id: '2',
      selected: false,
      size: 3,
      amt: '100',
      color: 'light',
      disabled:false
    },
    {
      id: '3',
      selected: false,
      size: 3,
      amt: '200',
      color: 'light',
      disabled:false
    },
    {
      id: '4',
      selected: false,
      size: 3,
      amt: '500',
      color: 'light',
      disabled:false
    }
  ];

  initData:any;

  togglChecked:boolean  = false;

  firstClickToggle:boolean = true;
  appUserId = this.authTokenService.getAppUserId();
  constructor( 
    private http:HttpClient,
    private translate: TranslateService,
    public navController: NavController,
    private authTokenService: AuthTokenService,
    private customToast:CustomToastProviderService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private defaultLanguageService:DefaultLanguageService
  ) {
    let defultLanguage = this.defaultLanguageService.getDefaultLanguage();
    this.translate.setDefaultLang(defultLanguage);
    this.translate.use(defultLanguage);

    let api = "/scm/app/getMicroPayment.do";
    let requestJson = {
      appUserId:this.appUserId
    };
    this.http.post(api,requestJson).subscribe((response:any) => {
      let body = response.responseBody;
      this.initData = body;
      // this.toggleDisabled = !body.disabled;
      // this.togglChecked = body.disabled;
      this.clickToggle(null,body);
      if(body.disabled){
        this.amtButtons.forEach(data=>{
          data.disabled=true;
        });
        return ;
      }
      // this.toggleEnabled=!body.disabled;
     
      // let selectedAmt = this.clickBtn;
      let item = this.amtButtons.find(data=>data.amt == body.paymentAmount);
      this.clickBtn(null,item);

    });
   }
   ngAfterViewChecked(): void {
    
     
   }
   ngAfterViewInit(){
    
   }

  ngOnInit() {
   
    
    
  }
  pageData:any;
  clickToggle(evt,data) {
    // debugger;
    // let disabledCli = evt.srcElement.disabled;
    if(data){
      this.toggleDisabled = data.disabled;
      this.togglChecked = !data.disabled;
    }else{
      this.toggleDisabled = this.togglChecked;
    }

 
    let api = "/scm/app/updateMicroPayment.do";
 
    let requestJson = {
      appUserId:this.appUserId,
      disabled:this.togglChecked,
      paymentAmount:this.initData.paymentAmount
    };
    this.pageData = requestJson;
    if(evt != null){

      this.http.post(api,requestJson).subscribe((response:any)=>{
        if(response.responseBody.closeSuccessfully){
          let navigationExtras: NavigationExtras = {
            queryParams: {
              closeMicroPayment:true,
              text:'Closed Successfully'
            } 
          };
          this.router.navigate(['/tabs/myAccount/setting/payment-settings'],navigationExtras);
        }else{
          this.customToast.show({
            icon:true,
            iconSuccess:true,
            message:'Opened Successfully',
            duration:2000
          });
        }
      });
    }

      // let item = this.amtButtons.find(data=>data.amt == this.initData.paymentAmount);

      // this.clickBtn(null,item.id);
    
      this.amtButtons.forEach(data=>{
        data.disabled=this.toggleDisabled;
      });
    // if (!this.inner) {
    //   // this.inner = false;
    // } else {
    //   // this.inner = true;
    //   this.amtButtons.forEach(data=>{
    //     data.disabled=true;
    //   });
    // }
  }

  clickBtn(evt: any, data: any) {

    this.amtButtons.forEach((item,index)=>{
      item.color = 'light';
      item.selected = false;
    });
    if (!data.selected) {
      data.color = 'primary';
      data.selected = true;
    }else{
          data.color = 'light';
        data.selected = false;
    }
  
      let api = "/scm/app/updateMicroPayment.do";
    let requestJson = {
      appUserId:this.appUserId,
      paymentAmount:data.amt
    };
    if(evt != null){
      this.http.post(api,requestJson).subscribe((response:any)=>{});
    }
  }

  routerBack(){
    this.navController.back();
  }
}
